<script setup>
import { EditPen, SwitchButton,User, Service,House,Dish,Odometer,Files} from '@element-plus/icons-vue'

</script>

<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部 -->
            <el-header class="header">
                <span class="title">竞享空间后端管理系统</span>
                <span class="right_tool">
                    <a href="">
                        <el-icon style="top: 3px;">
                            <EditPen />
                        </el-icon> 个人设置&nbsp;&nbsp;&nbsp; |
                        &nbsp;&nbsp;&nbsp;
                    </a>
                    <a href="">
                        <el-icon style="top: 3px;">
                            <SwitchButton />
                        </el-icon> 退出登录
                    </a>
                </span>
            </el-header>
            <!--end 头部 -->
            <el-container>
                <!--最边部分-->
                <el-aside width="200px" class="aside">
                    <el-menu router>
                        <el-menu-item default-active index="indexs">
                            <el-icon><House /></el-icon>
                            <span>主页</span>
                        </el-menu-item>
                        <el-menu-item index="emerge">
                            <el-icon><Files /></el-icon>
                            <span>紧接事件处理</span>
                        </el-menu-item>
                        <el-menu-item index="visualTool">
                            <el-icon><Odometer /></el-icon>
                            <span>数据统计</span>
                        </el-menu-item>
                        <el-menu-item index="course">
                            <el-icon><Dish /></el-icon>
                            <span>课程信息管理</span>
                        </el-menu-item>
                        <el-menu-item index="employee">
                            <el-icon><Service /></el-icon>
                            <span>教练信息管理</span>
                        </el-menu-item>
                        <el-menu-item index="user">
                            <el-icon><User /></el-icon>
                            <span>用户信息管理</span>
                        </el-menu-item>
                    </el-menu>

                </el-aside>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped>
.header {
    background-image: linear-gradient(to right,
            #687d00,
            #96a400,
            #17aa00,
            #00d0d0,
            #1262eb);
}

.title {
    color: white;
    font-size: 40px;
    font-family: 楷体;
    line-height: 60px;
    font-weight: bolder;
}

.right_tool {
    float: right;
    line-height: 60px;
}

a {
    color: white;
    text-decoration: none;
}

.aside {
    width: 220px;
    border-right: 1px solid #ccc;
    height: 730px;
}
</style>